<template>
  <ElContainer style="height: 100%">
    <el-main>
      <vue3-pro-table
        ref="tableRef"
        style="width: 100%"
        :request="tableStatus.request"
        :columns="tableStatus.columns"
        :search="tableStatus.search"
      >
        <template #operate="{ row }">
          <el-button type="primary" icon="Tickets" @click="printRow(row)" :loading="printRowStatus">
            打印
          </el-button
          >
          <el-button type="danger" icon="Tickets" @click="previewRow(row)" :loading="printRowStatus">
            预览
          </el-button
          >
        </template>
        <template #toolbar>
          <ElButton type="success" @click="printRows" :loading="printRowStatus">打印</ElButton>
        </template>
        <template #hadCheckBus="{ row }">
          <ElTag :type="row.hadCheckBus ? 'success' : 'danger'" effect="dark">{{
              row.hadCheckBus ? "√" : "×"
            }}
          </ElTag>
        </template>
        <template #hadCheckBloodInfo="{ row }">
          <ElTag
            :type="row.hadCheckBloodInfo ? 'success' : 'danger'"
            effect="dark"
          >{{ row.hadCheckBloodInfo ? "√" : "×" }}
          </ElTag
          >
        </template>
        <template #hadCheckBloodPressure="{ row }">
          <ElTag
            :type="row.hadCheckBloodPressure ? 'success' : 'danger'"
            effect="dark"
          >{{ row.hadCheckBloodPressure ? "√" : "×" }}
          </ElTag
          >
        </template>
        <template #hadCheckEcg="{ row }">
          <ElTag :type="row.hadCheckEcg ? 'success' : 'danger'" effect="dark">{{
              row.hadCheckEcg ? "√" : "×"
            }}
          </ElTag>
        </template>
        <template #hadCheckHealthExaminationInquiry="{ row }">
          <ElTag
            :type="row.hadCheckHealthExaminationInquiry ? 'success' : 'danger'"
            effect="dark"
          >{{ row.hadCheckHealthExaminationInquiry ? "√" : "×" }}
          </ElTag
          >
        </template>
        <template #hadCheckHeightWeightInfo="{ row }">
          <ElTag
            :type="row.hadCheckHeightWeightInfo ? 'success' : 'danger'"
            effect="dark"
          >{{ row.hadCheckHeightWeightInfo ? "√" : "×" }}
          </ElTag
          >
        </template>
        <template #hadCheckUrinalysis="{ row }">
          <ElTag
            :type="row.hadCheckUrinalysis ? 'success' : 'danger'"
            effect="dark"
          >{{ row.hadCheckUrinalysis ? "√" : "×" }}
          </ElTag
          >
        </template>
        <template #hadCheckBiochemistry="{ row }">
          <ElTag
            :type="row.hadCheckBiochemistry ? 'success' : 'danger'"
            effect="dark"
          >{{ row.hadCheckBiochemistry ? "√" : "×" }}
          </ElTag
          >
        </template>
        <template #hadCheckHealthExamination="{ row }">
          <ElTag
            :type="row.hadCheckHealthExamination ? 'success' : 'danger'"
            effect="dark"
          >{{ row.hadCheckHealthExamination ? "√" : "×" }}
          </ElTag
          >
        </template>
      </vue3-pro-table>
    </el-main>
  </ElContainer>
</template>

<script lang="ts" setup>
//显示当日体检人员==》应该从二维码来的、信息包括是否同步身高体重、是否同步血球、是否同步生化、是否同步血压、是否同步B超、是否同步中医、是否同步云端
import {reactive, ref} from "vue";
import {ipcRenderer} from "electron";
import {getQrList} from "@/api/archives";
import {downloadBlob} from "@/views/CheckStatus/downloadBlob";
import {ElMessage} from "element-plus";

const tableRef = ref()

const tableStatus = reactive({
  request: async (searchItem) => {
    debugger
    const data: any = await getQrList(searchItem);
    return {
      data: data.data,
      total: data.total,
    };
  },
  columns: [
    {
      label: "",
      prop: "s",
      type: 'selection'
    },
    {
      label: "姓名",
      prop: "user_name",
      fixed: "left",
      width: "80px",
      align: "center",
    },
    {
      label: "身份证号",
      prop: "id_no",
      fixed: "left",
      width: "200px",
      align: "center",
    },
    {
      label: "检查时间",
      prop: "date",
      fixed: "left",
      width: "100px",
      align: "center",
    },
    {label: "血球", prop: "hadCheckBloodInfo", tdSlot: "hadCheckBloodInfo"},
    {
      label: "生化",
      prop: "hadCheckBiochemistry",
      tdSlot: "hadCheckBiochemistry",
    },
    {
      label: "血压",
      prop: "hadCheckBloodPressure",
      tdSlot: "hadCheckBloodPressure",
    },

    {label: "B超", prop: "hadCheckBus", tdSlot: "hadCheckBus"},
    {label: "心电", prop: "hadCheckEcg", tdSlot: "hadCheckEcg"},
    {
      label: "中医体质",
      prop: "hadCheckHealthExaminationInquiry",
      tdSlot: "hadCheckHealthExaminationInquiry",
    },
    {
      label: "体检问询",
      prop: "hadCheckHealthExamination",
      tdSlot: "hadCheckHealthExamination",
    },
    {
      label: "身高体重",
      prop: "hadCheckHeightWeightInfo",
      tdSlot: "hadCheckHeightWeightInfo",
    },
    {
      label: "尿检",
      prop: "hadCheckUrinalysis",
      tdSlot: "hadCheckUrinalysis",
    },
    {
      label: "操作",
      fixed: "right",
      width: 200,
      align: "center",
      tdSlot: "operate", // 自定义单元格内容的插槽名称
    },
  ],
  search: {
    fields: [
      {
        label: "时间",
        name: "time",
        type: "daterange",
        trueNames: ["timeStart", "timeEnd"],
        style: {width: "360px"},
      },
      {
        label: "姓名/身份证号",
        name: "search",
        type: "text",
      },
    ],
  },
});

const downLoadReport = async (p, med) => {
  try {
    const {data} = await downloadBlob(`health_examination_reports/pdf`, p)
    let reader = new FileReader();
    reader.readAsDataURL(data as Blob);
    reader.addEventListener("loadend", () => {
      console.log(reader.result);
      // 通知主进程打印
      if (reader.result) {
        const result = reader.result as string;
        ipcRenderer.send("printPDF", {
          baseCode: Buffer.from(result.split("base64,")[1], "base64"),
          type: med
        });
      }
    });
  } catch (e) {
    ElMessage.error("文件打印失败")
  }
}

const printRowStatus = ref(false)
const printRow = async (row) => {
  printRowStatus.value = true
  try {
    await downLoadReport({
      qr_code_id: row.id
    }, 'print')
  } finally {
    printRowStatus.value = false
  }
};
const previewRow = async (row) => {
  printRowStatus.value = true
  try {
    await downLoadReport({
      qr_code_id: row.id
    }, 'preview')
  } finally {
    printRowStatus.value = false
  }
};
const printRows = async () => {
  const rows = tableRef.value.table.getSelectionRows();
  if (rows.length === 0) {
    return ElMessage.warning("请选择至少一条记录")
  }
  if (rows.length > 9) {
    return ElMessage.warning("一次打印不可超过10条")
  }
  try {
    await downLoadReport({
      id: rows.map(item => item.id).join(",")
    }, 'print')
  } finally {
    printRowStatus.value = false
  }
};
</script>
<style scoped lang="scss"></style>
